<template>
  <div>
    <div class="PhotoHead">
      <ul></ul>
    </div>
    <div class="PhotoTitle">
      <p
        style="margin-right: 66px"
        @click="show = 0"
        :class="{ curPhoto: show === 0 }"
      >
        全部
      </p>
      <p @click="show = 1" :class="{ curPhoto: show === 1 }">已拥有</p>
    </div>
    <AllPhoto v-show="show === 0" />
    <OwnerPhoto v-show="show === 1" />
  </div>
</template>

<script>
import AllPhoto from "../../components/practice/AllPhoto.vue";
import OwnerPhoto from "../../components/practice/OwnerPhoto.vue";
export default {
  name: "Photo",
  components: { AllPhoto, OwnerPhoto },
  data() {
    return {
      show: 0,
    };
  },
};
</script>

<style>
.PhotoHead {
  width: 100%;
  height: 270px;
  line-height: 20px;
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.PhotoHead ul {
  width: 200px;
  height: 200px;
  line-height: 40px;
  color: rgba(206, 206, 206, 100);
  border: 1px solid rgba(187, 187, 187, 100);
  border-radius: 50%;
}
.PhotoTitle {
  display: flex;
  font-size: 28px;
  margin-top: 60px;
  margin-left: 68px;
}
.curPhoto {
  color: rgba(16, 16, 16, 100);
  font-size: 32px;
}
</style>